<template>
  <div>
    <Header></Header>
    <div class="search-p">
      <input v-model.trim="name" class="search-input" placeholder="请输入商品" />
      <div @click="query" class="search-btn">搜索</div>
    </div>
    <div class="cate-list">
      <div class="cate-title">商品分类：</div>
      <div class="cate-item" :class="{ 'active': !categoryId }" @click="selectCategory('')">全部</div>
      <div v-for="item in categoryList" :class="{ 'active': categoryId == item.id }" @click="selectCategory(item.id)"
        class="cate-item">{{ item.name }}</div>

    </div>
    <a-spin :spinning="loading">
      <div class="goods">
        <div v-for="item in list" class="goods-item" @click="toDetail(item)">
          <img class="goods-img" :src="item.imgList![0]" alt="" srcset="">
          <div class="goods-price">
            <label class="price-num">{{ item.price! / 100 }}</label>
            元 / {{ item.unit }}
          </div>
          <div class="goods-name">{{ item.name }}</div>
          <div class="city">{{ item.company?.provinceName }} {{ item.company?.cityName }} {{ item.company?.areaName }}
          </div>
          <div class="company">{{ item.company?.name }}</div>
        </div>
        <div style="height: 30px;"></div>
        <Pager v-if="total > 0" :page-size="pageSize" :total="total" :page-num="pageNum" @change="change"></Pager>

        <a-empty v-if="total == 0" />
      </div>
    </a-spin>
    <Footer></Footer>
  </div>
</template>
<script setup lang="ts">
import Pager from '@/components/pager.vue';
import Header from './header.vue';
import { onMounted, ref } from 'vue';
import Footer from './footer.vue';
import { useRouter } from "vue-router"
import type { Goods } from '@/types/Goods'
import { useGoodsStore } from '@/stores/goods'
import { getGoodsList } from '@/api/goodsApi';
import type { Category } from '@/types/Category';
import { getCategoryList } from '@/api/categoryApi';
const router = useRouter()
const goodsStore = useGoodsStore()
const pageSize = ref(8)
const pageNum = ref(1)
const name = ref('')
const total = ref(0)
const list = ref<Goods[]>([])
const loading = ref(false)
const categoryList = ref<Category[]>([])
const categoryId = ref<number | string>("")

const getList = async (num: number) => {
  pageNum.value = num;

  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    name: name.value,
    categoryId: categoryId.value
  };

  loading.value = true;
  try {
    let res = await getGoodsList(params);
    list.value = res.data.records;
    total.value = res.data.total;
  } catch (error) {

  }
  loading.value = false;
}



const change = (num: number) => {
  getList(num)
}

const query = () => {
  getList(1)
}

const selectCategory = (id: any) => {
  categoryId.value = id
  getList(1)
}

const toDetail = (item: Goods) => {
  goodsStore.updateGoods = item
  router.push({
    path: '/shopDetail'
  })
}

onMounted(async () => {
  getList(1)

  let res = await getCategoryList({ pageNum: 1, pageSize: 1000 })
  categoryList.value = res.data.records
})

</script>
<style scoped>
.search-p {
  text-align: center;
  padding: 20px 0;
}

.search-input {
  width: 400px;
  height: 38px;
  border: var(--primary-color) solid 1px;
  outline: none;
  padding: 0 8px;
  vertical-align: middle;
}

.search-btn {
  color: #fff;
  width: 100px;
  height: 40px;
  background: var(--primary-color);
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}

.goods {
  width: 1200px;
  margin: 0 auto;
  min-height: 600px;

}

.goods-item {
  display: inline-block;
  padding: 14px;
  vertical-align: top;
  font-size: 14px;
  background: #fff;
  border: 1px solid #00000010;
  cursor: pointer;
  margin: 10px;
}

.goods-img {
  width: 250px;
  height: 120px;
  object-fit: cover;

}

.goods-price {
  color: grey;
  margin: 10px 0 0 0;
}

.price-num {
  color: var(--danger-color);
}

.goods-name {
  font-size: 16px;
  margin: 10px 0 0 0;
}

.city {
  color: #00000073;
  margin: 10px 0 0 0;
}

.company {
  background: var(--primary-color);
  color: #fff;
  display: inline-block;
  padding: 4px 8px;
  margin: 10px 0 0 0;
}

.cate-list {
  width: 1200px;
  margin: 20px auto;
  background: #fff;
  display: flex;
  align-items: center;
}

.cate-title {
  height: 50px;
  line-height: 50px;
  margin: 0 30px;
}

.cate-item {
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  cursor: pointer;
}

.active {
  color: #fff;
  background: var(--primary-color);
}
</style>